<template>
  <div class="now-time">
    <div class="date">{{ nowDate }}</div>
    <div class="clock">
      <div class="flip">
        <div class="digital front" data-number="0"></div>
        <div class="digital back" data-number="1"></div>
      </div>
      <div class="flip">
        <div class="digital front" data-number="0"></div>
        <div class="digital back" data-number="1"></div>
      </div>
      <em class="divider">:</em>
      <div class="flip">
        <div class="digital front" data-number="0"></div>
        <div class="digital back" data-number="1"></div>
      </div>
      <div class="flip">
        <div class="digital front" data-number="0"></div>
        <div class="digital back" data-number="1"></div>
      </div>
      <em class="divider">:</em>
      <div class="flip">
        <div class="digital front" data-number="0"></div>
        <div class="digital back" data-number="1"></div>
      </div>
      <div class="flip">
        <div class="digital front" data-number="0"></div>
        <div class="digital back" data-number="1"></div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'nowTime',
  data () {
    return {
      nowDate: dayjs(new Date()).format('YYYY年MM月DD日')
    }
  },
  created () {

  },
  mounted () {
    this.clock()
    this.getDate()
  },
  methods: {
    getDate () {
    },
    clock () {
      var Flipper = /** @class */ (function () {
        function Flipper (node, currentTime, nextTime) {
          this.isFlipping = false
          this.duration = 600
          this.flipNode = node
          this.frontNode = node.querySelector('.front')
          this.backNode = node.querySelector('.back')
          this.setFrontTime(currentTime)
          this.setBackTime(nextTime)
        }
        Flipper.prototype.setFrontTime = function (time) {
          this.frontNode.dataset.number = time
        }
        Flipper.prototype.setBackTime = function (time) {
          this.backNode.dataset.number = time
        }
        Flipper.prototype.flipDown = function (currentTime, nextTime) {
          var _this = this
          if (this.isFlipping) {
            return false
          }
          this.isFlipping = true
          this.setFrontTime(currentTime)
          this.setBackTime(nextTime)
          this.flipNode.classList.add('running')
          setTimeout(function () {
            _this.flipNode.classList.remove('running')
            _this.isFlipping = false
            _this.setFrontTime(nextTime)
          }, this.duration)
        }
        return Flipper
      }())
      var getTimeFromDate = function (date) {
        return date
          .toTimeString()
          .slice(0, 8)
          .split(':')
          .join('')
      }
      var flips = document.querySelectorAll('.flip')
      var now = new Date()
      var nowTimeStr = getTimeFromDate(new Date(now.getTime() - 1000))
      var nextTimeStr = getTimeFromDate(now)
      var flippers = Array.from(flips).map(function (flip, i) { return new Flipper(flip, nowTimeStr[i], nextTimeStr[i]) })
      setInterval(function () {
        var now = new Date()
        var nowTimeStr = getTimeFromDate(new Date(now.getTime() - 1000))
        var nextTimeStr = getTimeFromDate(now)
        for (var i = 0; i < flippers.length; i++) {
          if (nowTimeStr[i] === nextTimeStr[i]) {
            continue
          }
          flippers[i].flipDown(nowTimeStr[i], nextTimeStr[i])
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.now-time {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .date {
    font-size: 0.3rem;
    letter-spacing: 5px;
    margin-bottom: 10px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
      sans-serif;
  }
  .clock {
    display: flex;
  }
  .clock .divider {
    font-size: 0.5rem;
    line-height: 60px;
    font-style: normal;
  }
  .clock .flip {
    position: relative;
    width: 30px;
    height: 50px;
    margin: 2px;
    font-size: 0.4rem;
    line-height: 50px;
    text-align: center;
    margin: 5px;
    border: 1px solid #14386e;
    border-radius: 10px;
    // box-shadow: 0 2px 6px #103262;
  }
  .clock .flip .digital::before,
  .clock .flip .digital::after {
    position: absolute;
    content: attr(data-number);
    left: 0;
    right: 0;
    color: white;
    background: #020129;
    overflow: hidden;
    -webkit-perspective: 160px;
    perspective: 160px;
  }
  .clock .flip .digital::before {
    top: 0;
    bottom: 50%;
    // border-bottom: 1px solid #666;
    border-radius: 10px 10px 0 0;
  }
  .clock .flip .digital::after {
    top: 50%;
    bottom: 0;
    line-height: 0;
    border-radius: 0 0 10px 10px;
  }
  .clock .flip .back::before,
  .clock .flip .front::after {
    z-index: 1;
  }
  .clock .flip .back::after {
    z-index: 2;
  }
  .clock .flip .front::before {
    z-index: 3;
  }
  .clock .flip .back::after {
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: rotateX(0.5turn);
    transform: rotateX(0.5turn);
  }
  .clock .flip.running .front::before {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation: frontFlipDown 0.6s ease-in-out;
    animation: frontFlipDown 0.6s ease-in-out;
    box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .clock .flip.running .back::after {
    -webkit-animation: backFlipDown 0.6s ease-in-out;
    animation: backFlipDown 0.6s ease-in-out;
  }

  @-webkit-keyframes frontFlipDown {
    to {
      -webkit-transform: rotateX(0.5turn);
      transform: rotateX(0.5turn);
    }
  }

  @keyframes frontFlipDown {
    to {
      -webkit-transform: rotateX(0.5turn);
      transform: rotateX(0.5turn);
    }
  }
  @-webkit-keyframes backFlipDown {
    to {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
    }
  }
  @keyframes backFlipDown {
    to {
      -webkit-transform: rotateX(0);
      transform: rotateX(0);
    }
  }
}
</style>
